function $(id){
  return document.getElementById(id);
}
/* 数据格式演示
var aqiSourceData = {
  "北京": {
    "2016-01-01": 10,
    "2016-01-02": 10,
    "2016-01-03": 10,
    "2016-01-04": 10
  }
};
*/

// 以下两个函数用于随机模拟生成测试数据
function getDateStr(dat) {
  var y = dat.getFullYear();
  var m = dat.getMonth() + 1;
  m = m < 10 ? '0' + m : m;
  var d = dat.getDate();
  d = d < 10 ? '0' + d : d;
  return y + '-' + m + '-' + d;
}
function randomBuildData(seed) {
  var returnData = {};
  var dat = new Date("2016-01-01");
  var datStr = ''
  for (var i = 1; i < 92; i++) {
    datStr = getDateStr(dat);
    returnData[datStr] = Math.ceil(Math.random() * seed);
    dat.setDate(dat.getDate() + 1);
  }
  return returnData;
}

var aqiSourceData = {
  "北京": randomBuildData(500),
  "上海": randomBuildData(300),
  "广州": randomBuildData(200),
  "深圳": randomBuildData(100),
  "成都": randomBuildData(300),
  "西安": randomBuildData(500),
  "福州": randomBuildData(100),
  "厦门": randomBuildData(100),
  "沈阳": randomBuildData(500)
};

// 用于渲染图表的数据
var chartData = [];

// 记录当前页面的表单选项
var pageState = {
  nowSelectCity: "北京",
  nowGraTime: "day"
}

/**
 * 渲染图表
 */
function renderChart() {
  let html = '';
  let width= 1000 / (chartData.length * 2);
  let colorAll = ['#696969','#ff0033','#ffcd00','#1b9d5f','#00ffcc','#cb00ff'];
  for(let i=0;i<chartData.length;i++){
    let colorI = Math.floor(Math.random()*6);
    let color = colorAll[colorI];
     html += `<div title="${chartData[i].key}，总计：${chartData[i].allValue}，平均${chartData[i].average}" style="height:${chartData[i].average}px;background:${color};width:${width}px;margin:0 ${width/2}px;"></div>`
  }
  document.getElementsByClassName('aqi-chart-wrap')[0].innerHTML = html;
}
/**
 * 日、周、月的radio事件点击时的处理函数
 */
function graTimeChange(e) {
  if(e.target.nodeName.toLowerCase() == 'input' && e.target.value !== pageState.nowGraTime){
    pageState.nowGraTime = e.target.value;
    initAqiChartData();
  }
}
/**
 * select发生变化时的处理函数
 */
function citySelectChange() {
  for(let i=0;i<$('city-select').children.length;i++){
    if($('city-select')[i].selected && pageState.nowSelectCity !== $('city-select')[i].text){
      pageState.nowSelectCity = $('city-select')[i].text;
      initAqiChartData();
    }
  }
}

/**
 * 初始化日、周、月的radio事件，当点击时，调用函数graTimeChange
 */
function initGraTimeForm() {
  $('form-gra-time').addEventListener('click', graTimeChange,false)
}
/**
 * 初始化城市Select下拉选择框中的选项
 */
function initCitySelector() {
  // 读取aqiSourceData中的城市，然后设置id为city-select的下拉列表中的选项
  let selecthtml = '';
  for(let key in aqiSourceData){
     selecthtml += `<option>${key}</option>`;
  }
  $('city-select').innerHTML = selecthtml;
  // 给select设置事件，当选项发生变化时调用函数citySelectChange
  $('city-select').addEventListener('change',citySelectChange,false);
}
/**
 * 初始化图表需要的数据格式
 */
function initAqiChartData() {
  // 将原始的源数据处理成图表需要的数据格式
  let cityData = aqiSourceData[pageState.nowSelectCity];
  // 处理好的数据存到 chartData 中
  switch(pageState.nowGraTime) {
    case 'day':
       chartData = [];
       for(let it in cityData){
        chartData.push({key:it,allValue:cityData[it],average:cityData[it]});
       }
       break;
    case 'week':
       chartData = [];
       let array = [];//总共有多少个周
       let arr = [];//用来存放周一到周日
       for(let key in cityData){
          arr.push({key:key,value:cityData[key]});
          // 判断是否是周日
          if(new Date(key).getDay() == 6){
            array.push(arr);
            arr = [];
          }
       }
      //判断   最后几天不够七天
       if(arr.length>0){
        array.push(arr);
       }
       showData(array,1);
       break;
    case 'month':
       chartData = [];
       let currentMonth = 0;//当前月份
       let arrayMonth = [];//用来存放几个月
       let arrMon = [];//用来存放一个月的数据
       for(let key in cityData){
         if(new Date(key).getMonth() == currentMonth){
          arrMon.push({key:key,value:cityData[key]});
         }
        if(new Date(key).getMonth() !== currentMonth){
          currentMonth = new Date(key).getMonth();
          arrayMonth.push(arrMon);
          arrMon = [];
          arrMon.push({key:key,value:cityData[key]});
          }
        }
        arrayMonth.push(arrMon);
        showData(arrayMonth,2);
       break;
  } 
  renderChart();
}
// 处理周、月数据 array数据   type1周2月
function showData(array,type){
  let all = ['周','月'];
  let text = all[type-1];
  for(let k=0;k<array.length;k++){
    let weekAll = 0;//每周的总共值
    let weekKey = '';//每周的开头日期和结束日期
    for(let j =0;j<array[k].length;j++){
       weekAll += array[k][j].value;
       if(j == 0){//每周的开头
        weekKey += array[k][0].key + '----';
       }
       if(j == array[k].length-1){//每周的结尾
        weekKey += array[k][j].key;
       }
    }
    chartData.push({key:`第${k+1}${text}${weekKey}`,allValue:`${weekAll}`,average:`${parseInt(weekAll / array[k].length)}`})
 }
}
/**
 * 初始化函数
 */
function init() {
  initGraTimeForm();
  initCitySelector();
  initAqiChartData();
}
init();
// 总结  init 调用三个方法  1.监听、获取年月日变化、并调用调整数据函数渲染2.监听城市变化并调用调整数据函数渲染3.获取年月日和城市初始值，并调整数据、渲染
// js api 
// 设置日期 生成固定的日期key setDate()
// 处理 每周和每月的逻辑 getDay() 判断是否是周日   getMonth() 判断是否是同一个月
// 渲染  用flex 布局 align-items:flex-end; 让div到同一水平线